<template>
    <h1>APP 组件 --- {{ num }}</h1>

    <button @click="addNum">点击修改num</button>

    <ul>
        <li>{{ obj.name }}</li>
        <li>{{ obj.age }}</li>
        <li>{{ obj.id }}</li>
    </ul>

</template>

<script setup>
import { ref, reactive } from 'vue'

const num = ref(100)

const obj = ref({
    name: '张三',
    age: 18,
    id: 'qf001'
})

const info = reactive({
    id: "xf001",
    name: "苹果",
    price: 100,
    number: 20,
});
info.name = '橘子'
info.price = 50

function addNum() {
    num.value++
    console.log("num 最新的值: ", num.value);
}
</script>


